<template>
	<view>
		<!-- 地图 -->
		<view class="map-box">
			<map style="width: 100%; height: 80vh;" :latitude="latitude" :longitude="longitude" :markers="markers"
				:scale="scale">
			</map>
		</view>
		<!-- 覆盖层 -->
		<view class="cover" v-for="items in orderDetailsList">
			<view class="cover-reflash">
				<image src="../../../static/img/luo/reflash.png" mode=""></image>
			</view>
			<view  class="cover-bg cover-distance">
				<text>您已接单，距离用户{{items.distance}}m</text>
			</view>
			<!-- nav -->
			<view class="cover-bg cover-nav">
				<view class="nav-items" @click="goPlatform">
					<image src="../../../static/img/luo/platform.png" mode=""></image>
					<text>练习平台</text>
				</view>
				<view class="nav-items" @click="communiteUser(items.serverTel)">
					<image src="../../../static/img/luo/user.png" mode=""></image>
					<text>联系用户</text>
				</view>
				<view class="nav-items" @click="cancelOrder">
					<image style="background-color: #C6C6C6;border: 2rpx solid #C6C6C6;" src="../../../static/img/luo/cancel.png" mode=""></image>
					<text>取消订单</text>
				</view>
			</view>
			<!-- title -->
			<view class="cover-bg title-box">
				<view class="server-title">
					<!-- 左 -->
					<view class="server-left">
						<view class="server-img">
							<image src="../../../static/img/luo/doctor.png"></image>
						</view>
						<text>助医服务</text>
					</view>
					<!-- 右 -->
					<view style="margin: 16rpx;">
						<view style="color: #FF8040;">
							<text>￥</text>
							<text style="font-size: 40rpx;">{{items.serverMoney}}</text>
						</view>
					</view>
				</view>
				<!-- main -->
				<view class="server-main">
					<text>小计</text>
					<text class="mian-money">￥{{items.allMoney}}</text>
				</view>
			</view>
			<!-- serverMsg -->
			<view class="cover-bg server-msg">
				<view class="msg-itmes">
					<text>服务信息</text>
				</view>
				<view class="msg-itmes">
					<text style="color: #999999;">服务地址</text>
					<text>{{items.serverAddress}}</text>
				</view>
				<view class="msg-itmes">
					<text style="color: #999999;">电话</text>
					<text>{{items.serverTel}}</text>
				</view>
				<view class="msg-itmes">
					<text style="color: #999999;">陪护员</text>
					<text>{{items.serverName}}</text>
				</view>
			</view>
			<!-- orderMsg -->
			<view class="cover-bg server-msg">
				<view class="msg-itmes">
					<text>订单信息</text>
				</view>
				<view class="msg-itmes">
					<text style="color: #999999;">备注</text>
					<text>{{items.orderTips}}</text>
				</view>
				<view class="msg-itmes">
					<text style="color: #999999;">订单编号</text>
					<view style="display: flex;flex-direction: row;">{{items.orderNumber}}
						<view style="margin-left: 15rpx;color: #3776E5;" @click="copyMsg(items.orderNumber)" >复制</view>
					</view>
				</view>
				<view class="msg-itmes">
					<text style="color: #999999;">下单时间</text>
					<text>{{items.orderTime}}</text>
				</view>
				<view class="msg-itmes">
					<text style="color: #999999;">支付方式</text>
					<text>{{items.orderWays}}</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import QQMapWX from '../../../untils/qqmap-wx-jssdk.js' // 引入SDK核心类，js文件根据自己业务，位置可自行放置
	import app from '../../../App.vue'
	export default {
		data() {
			return {
				
				//地图
				id: 0, //使用 marker点击事件 需要填写id
				title: 'map',
				longitude: '114.324520',
				latitude: "23.099994",
				markers: [{
					id:1,
					iconPath: '../../../static/img/luo/marker1.png',
					longitude: '114.324520',
					latitude: "23.099994",
					width: 30,
					height: 30,
					callout: {
						display: 'ALWAYS',
						content: '您距离用户300m',
						color: '#242424',
						fontSize: 16,
					}
				},
				{
					id:1,
					iconPath: '../../../static/img/luo/hanser.webp',
					longitude: '114.321520',
					latitude: "23.091994",
					width: 30,
					height: 30,
					callout: {
						display: 'ALWAYS',
						content: '客户位置',
						color: '#242424',
						fontSize: 16,
					}
				}],
				scale: 14,
				//orderDetails
				orderDetailsList:[{
					id:1,
					distance:300,
					serverMoney:38,
					allMoney:26516,
					serverAddress:'上海',
					serverTel:'156165166468',
					serverName:'张晓华',
					orderTips:'来个及技术好的',
					orderNumber:'13151515611561',
					orderTime:'2018-12-12 00:01:01',
					orderWays:'免支付'
				}]
			}
		},

		methods: {
			// 地图
			getMapAddress() {
				const tMap = new QQMapWX({
					key: 'QJLBZ-ZCQEJ-TN4FN-KVDDX-33GX7-ZDFTJ'
				});
				//使用 uni.getLocation获取用户所在经纬度
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log("获取经纬度成功");
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.markers[0].latitude= res.latitude;
						this.markers[0].longitude= res.longitude;
						this.markers[1].latitude= res.latitude-0.003;
						this.markers[1].longitude= res.longitude-0.003;
					},
					fail: (res) => {
						console.log(res);
					},
					complete: () => {
						// 使用腾讯sdk的reverseGeocoder方法 解析经纬度
						tMap.reverseGeocoder({
							location: {
								latitude: this.latitude,
								longitude: this.longitude,
								
							},
							success: function(res) {
								console.log("解析地址成功", res);
								console.log("当前地址：", res.result.address);
								//保存缓存
								uni.setStorage({
									key: 'local',
									data: res.result.address,
									success() {
										console.log("用户地址信息已缓存")
									}
								})
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: "none"
								})
								console.log(res);
							},
							complete: function(res) { //无论成功失败都会执行
								wx.switchTab({
									// 	url: '../appointment/appointment'
								})
							}
						})
					}
				})
			},
			//NAV
			goPlatform(){
				console.log('goPlatform')
			},
			communiteUser(value){
				// console.log('communiteUser')
				uni.makePhoneCall({
					phoneNumber:value
				})
			},
			cancelOrder(items){
				let id=items.id
				//console.log(id)
				uni.redirectTo({
					url:`../cancelOrder/cancelOrder?id=${id}`
				})
			},
			copyMsg(value){
				console.log('复制')
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: function() {
							//在success中加入uni.hideToast()可以解决
							uni.showToast({
								title: '复制成功',
								duration: 2000,
							});
							
						},
						fail: function(err) {
							uni.showToast({
								title: '复制失败',
								duration: 2000,
							});
						}
				});
			}
		},
		onLoad() {
			
			//2.获取陪护员地理位置
			this.getMapAddress();
			//3.获取用户头像
			// this.getUserProfile();
		},

	}
</script>

<style scoped>
	.map-box{
		position: relative;
		
	}
	/* 覆盖层 */
	.cover-bg{
		width: 95vw;
		margin: 20rpx 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 0 1rpx 0 #CDCDCD;
		border:2rpx solid #CDCDCD ;
	}
	.cover{
		position: relative;
		top: -200rpx;
	}
	.cover-reflash image{
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
		background-color: #fffaf8;
		border-radius: 10rpx;
		font-size: 30rpx;
		
	}
	.cover-distance{
		color: #242424;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cover-nav{
		height: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.nav-items{
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.cover-nav image{
		background-color: #3776E5;
		border: 2rpx solid #3776E5;
		border-radius: 100%;
		width: 60rpx;
		height: 60rpx;
		padding: 20rpx;
		margin-bottom: 10rpx;
	}
	/* title */
	.search-box{
		display: flex;
		flex-direction: column;
		border: 2rpx solid #CDCDCD;
		border-radius: 10rpx;
	}
	.server-title{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.server-left{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 20rpx;
	}
	.server-img{
		background-color: #3776E5;
		width: 70rpx;
		height: 70rpx;
		padding: 20rpx;
		margin-right: 20rpx;
	}
	.server-img image{
		width: 70rpx;
		height: 70rpx;
	}
	.server-main{
		border-top: 2rpx solid #CDCDCD;
		margin: 0 20rpx 0 20rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.mian-money{
		color: #FF8040;
		margin-left: 20rpx;
	}
	/* server msg */
	.msg-itmes{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 20rpx;
	}
</style>
